<template>
  <div>
    <p class="tit">每日任务</p>
    <div class="slist" v-for="(item, index) in testList" :key="index">
      <p>{{ item.tit }}</p>
      <router-link :to="item.path">
        <button>去完成</button>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      testList: [
        { tit: "打卡", path: "/home/practice" },
        { tit: "完成练习", path: "" },
        { tit: "发动态", path: "" },
        { tit: "会员", path: "/my/vip" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.tit {
  font-size: 28px;
  font-weight: bold;
  margin: 200px 0 24px 64px;
}
.slist {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  p {
    width: 400px;
    height: 60px;
    font-size: 28px;
    text-align: center;
    margin-left: 66px;
    border: 2px solid rgba(187, 187, 187, 100);
  }
  button {
    width: 120px;
    height: 64px;
    font-size: 28px;
    color: black;
    margin-right: 34px;
  }
}
</style>